<template>
    <div class="info">
        <el-form label-width="125px" :model="basicForm">
            <div class="flex-box">
                <el-form-item label="计算因子编号/名称:" class="width-100" label-width="135px">
                    <el-select
                        v-model="basicForm.enFacCode"
                        placeholder="请输入"
                        size="mini"
                        :disabled="paramDisabled"
                        style="width: 40%"
                        @change="getEnFacSubPojoList"
                        filterable
                        clearable
                    >
                        <el-option
                            v-for="item in calcFactorList"
                            :key="item.entryCalculateFactorCode"
                            :label="item.entryCalculateFactorCode + ' ' + item.entryCalculateFactorName"
                            :value="item.entryCalculateFactorCode"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <div class="row-st">
                    <el-form-item label="因子颗粒度拆解:" class="width-50">
                        <el-select v-model="basicForm.enFacSubCode" placeholder="请输入" size="mini" :disabled="paramDisabled">
                            <el-option
                                v-for="item in enFacSubPojoList"
                                :key="item.enFacSubCode"
                                :label="item.enFacSubName"
                                :value="item.enFacSubCode"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="估值方式:" class="width-50">
                        <el-select v-model="basicForm.valType" placeholder="请输入" size="mini" :disabled="paramDisabled">
                            <el-option v-for="(value, key) in valTypePojo" :key="key" :label="value" :value="key"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="结算模式:" class="width-50">
                        <el-select v-model="basicForm.tradeSettleMode" placeholder="请输入" size="mini" :disabled="paramDisabled">
                            <el-option v-for="(value, key) in tradeSettleMode" :key="key" :label="value" :value="key"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="配置说明:" class="width-50">
                        <el-input v-model="basicForm.comment" placeholder="请输入" size="mini" :disabled="paramDisabled" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="是否通过凭证分析:" class="width-50" label-width="130px">
                        <el-select
                            v-model="basicForm.isVouch"
                            placeholder="请输入"
                            size="mini"
                            :disabled="paramDisabled"
                            @change="changeParams('isVouch')"
                        >
                            <el-option v-for="(value, key) in isVouchPojo" :key="key" :label="value" :value="key"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="归因标识:" class="width-50">
                        <el-select v-model="basicForm.causeTag" placeholder="请输入" size="mini" :disabled="paramDisabled">
                            <el-option
                                v-for="item in checkedCauseTagList"
                                :key="item.dictKey"
                                :label="item.dictKeyName"
                                :value="item.dictKey"
                                :disabled="item.disabled"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <div class="row-st">
                        <el-form-item label="凭证科目映射:" class="width-50">
                            <el-select
                                v-model="basicForm.matchVouchSubNoList"
                                placeholder="请输入"
                                size="mini"
                                :disabled="disabledByVouch"
                                multiple
                                collapse-tags
                                filterable
                                clearable
                            >
                                <el-option
                                    v-for="item in subjectList"
                                    :key="item.subjectCode"
                                    :value="item.subjectCode"
                                    :label="item.subjectName"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="模糊配置" class="width-50">
                            <span slot="label">
                                <el-checkbox
                                    v-model="checkShowParams.fuMatchVouchSubNoShow"
                                    :disabled="disabledByVouch"
                                    clearable
                                    @change="
                                        () => {
                                            basicForm.fuMatchVouchSubNo = '';
                                        }
                                    "
                                    >模糊配置</el-checkbox
                                >
                            </span>
                            <el-input
                                v-model="basicForm.fuMatchVouchSubNo"
                                placeholder="请输入"
                                size="mini"
                                :disabled="disabledByVouch || !checkShowParams.fuMatchVouchSubNoShow"
                                clearable
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="摘要配置:" class="width-100">
                            <el-row class="row-st">
                                <el-col :span="6">
                                    <el-checkbox
                                        v-model="checkShowParams.vouRemarkEqualListShow"
                                        :disabled="disabledByVouch"
                                        clearable
                                        @change="
                                            () => {
                                                basicForm.vouRemarkEqualList = [];
                                            }
                                        "
                                        >等于</el-checkbox
                                    >
                                    <el-select
                                        v-model="basicForm.vouRemarkEqualList"
                                        placeholder="请选择"
                                        size="mini"
                                        :disabled="disabledByVouch || !checkShowParams.vouRemarkEqualListShow"
                                        multiple
                                        collapse-tags
                                        clearable
                                        class="minusText"
                                        filterable
                                    >
                                        <el-option
                                            v-for="item in causeRelationList"
                                            :key="item.remarkCode"
                                            :value="item.remarkCode"
                                            :label="item.remark"
                                        ></el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="6">
                                    <el-checkbox
                                        v-model="checkShowParams.vouRemarkNoequalListShow"
                                        :disabled="disabledByVouch"
                                        @change="
                                            () => {
                                                basicForm.vouRemarkNoequalList = [];
                                            }
                                        "
                                        >不等于</el-checkbox
                                    >
                                    <el-select
                                        v-model="basicForm.vouRemarkNoequalList"
                                        placeholder="请选择"
                                        size="mini"
                                        :disabled="disabledByVouch || !checkShowParams.vouRemarkNoequalListShow"
                                        multiple
                                        collapse-tags
                                        clearable
                                        filterable
                                        class="minusText"
                                    >
                                        <el-option
                                            v-for="item in causeRelationList"
                                            :key="item.remarkCode"
                                            :value="item.remarkCode"
                                            :label="item.remark"
                                        ></el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="6">
                                    <el-checkbox
                                        v-model="checkShowParams.vouRemarkContainListShow"
                                        :disabled="disabledByVouch"
                                        @change="
                                            () => {
                                                basicForm.vouRemarkContainList = [];
                                            }
                                        "
                                        >包含</el-checkbox
                                    >
                                    <el-select
                                        v-model="basicForm.vouRemarkContainList"
                                        placeholder="请选择"
                                        size="mini"
                                        :disabled="disabledByVouch || !checkShowParams.vouRemarkContainListShow"
                                        multiple
                                        collapse-tags
                                        clearable
                                        class="minusText"
                                        filterable
                                    >
                                        <el-option
                                            v-for="item in causeRelationList"
                                            :key="item.remarkCode"
                                            :value="item.remarkCode"
                                            :label="item.remark"
                                        ></el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="6">
                                    <el-checkbox
                                        v-model="checkShowParams.vouRemarkNocontainListShow"
                                        :disabled="disabledByVouch"
                                        @change="
                                            () => {
                                                basicForm.vouRemarkNocontainList = [];
                                            }
                                        "
                                        >不包含</el-checkbox
                                    >
                                    <el-select
                                        v-model="basicForm.vouRemarkNocontainList"
                                        placeholder="请选择"
                                        size="mini"
                                        :disabled="disabledByVouch || !checkShowParams.vouRemarkNocontainListShow"
                                        multiple
                                        collapse-tags
                                        clearable
                                        class="minusText"
                                        filterable
                                    >
                                        <el-option
                                            v-for="item in causeRelationList"
                                            :key="item.remarkCode"
                                            :value="item.remarkCode"
                                            :label="item.remark"
                                        ></el-option>
                                    </el-select>
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item label="是否追溯明细:" class="width-50">
                            <el-select
                                v-model="basicForm.isTrack"
                                placeholder="请输入"
                                size="mini"
                                :disabled="disabledByVouch"
                                @change="changeParams('isTrack')"
                            >
                                <el-option v-for="(value, key) in isVouchPojo" :key="key" :label="value" :value="key"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="追溯天数:" class="width-50">
                            <el-input-number
                                v-model="basicForm.trackDay"
                                placeholder="请输入"
                                size="mini"
                                :disabled="disabledByTrack"
                                :min="0"
                                controls-position="right"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item label="追溯明细配置:" class="width-100">
                            <h3>一层(T+0)</h3>
                            <el-row class="row-st">
                                <el-col :span="8">
                                    <el-select
                                        v-model="basicForm.tckMatchVouSubNoOneList"
                                        placeholder="请选择"
                                        size="mini"
                                        :disabled="disabledByTrack"
                                        multiple
                                        collapse-tags
                                        clearable
                                        class="minusText"
                                        filterable
                                    >
                                        <el-option
                                            v-for="item in subjectList"
                                            :key="item.subjectCode"
                                            :value="item.subjectCode"
                                            :label="item.subjectName"
                                        ></el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="8">
                                    <el-checkbox
                                        v-model="checkShowParams.tckFuMatchVouSubNoOneShow"
                                        :disabled="disabledByTrack"
                                        @change="
                                            () => {
                                                basicForm.tckFuMatchVouSubNoOne = '';
                                            }
                                        "
                                        >模糊配置</el-checkbox
                                    >
                                    <el-input
                                        v-model="basicForm.tckFuMatchVouSubNoOne"
                                        placeholder="请输入"
                                        size="mini"
                                        :disabled="disabledByTrack || !checkShowParams.tckFuMatchVouSubNoOneShow"
                                        clearable
                                        class="minusText"
                                    >
                                    </el-input>
                                </el-col>
                                <el-col :span="8">
                                    <span>摘要</span>
                                    <el-select
                                        v-model="basicForm.tckVouRemarkContainOneList"
                                        placeholder="请选择"
                                        size="mini"
                                        :disabled="disabledByTrack"
                                        multiple
                                        collapse-tags
                                        clearable
                                        class="minusText"
                                        filterable
                                    >
                                        <el-option
                                            v-for="item in causeRelationList"
                                            :key="item.remarkCode"
                                            :value="item.remarkCode"
                                            :label="item.remark"
                                        ></el-option>
                                    </el-select>
                                </el-col>
                            </el-row>
                            <h3>两层(T+0/T+1)</h3>
                            <div class="row-st">
                                <el-row>
                                    <el-col :span="8">
                                        <span>追溯第一层</span>
                                        <el-select
                                            v-model="basicForm.tckMatchVouSubNo1TwoList"
                                            placeholder="请选择"
                                            size="mini"
                                            :disabled="disabledByTrack"
                                            multiple
                                            collapse-tags
                                            clearable
                                            class="minusText"
                                            filterable
                                        >
                                            <el-option
                                                v-for="item in subjectList"
                                                :key="item.subjectCode"
                                                :value="item.subjectCode"
                                                :label="item.subjectName"
                                            ></el-option>
                                        </el-select>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-checkbox
                                            v-model="checkShowParams.tckFuMatchVouSubNo1TwoShow"
                                            :disabled="disabledByTrack"
                                            @change="
                                                () => {
                                                    basicForm.tckFuMatchVouSubNo1Two = '';
                                                }
                                            "
                                            >模糊配置</el-checkbox
                                        >
                                        <el-input
                                            v-model="basicForm.tckFuMatchVouSubNo1Two"
                                            placeholder="请输入"
                                            size="mini"
                                            :disabled="disabledByTrack || !checkShowParams.tckFuMatchVouSubNo1TwoShow"
                                            clearable
                                            class="minusText"
                                        >
                                        </el-input>
                                    </el-col>
                                    <el-col :span="8">
                                        <span>摘要</span>
                                        <el-select
                                            v-model="basicForm.tckVouRemarkContain1TwoList"
                                            placeholder="请选择"
                                            size="mini"
                                            :disabled="disabledByTrack"
                                            multiple
                                            collapse-tags
                                            clearable
                                            class="minusText"
                                            filterable
                                        >
                                            <el-option
                                                v-for="item in causeRelationList"
                                                :key="item.remarkCode"
                                                :value="item.remarkCode"
                                                :label="item.remark"
                                            ></el-option>
                                        </el-select>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="8">
                                        <span>追溯第二层</span>
                                        <el-select
                                            v-model="basicForm.tckMatchVouSubNo2TwoList"
                                            placeholder="请选择"
                                            size="mini"
                                            :disabled="disabledByTrack"
                                            multiple
                                            collapse-tags
                                            clearable
                                            class="minusText"
                                            filterable
                                        >
                                            <el-option
                                                v-for="item in subjectList"
                                                :key="item.subjectCode"
                                                :value="item.subjectCode"
                                                :label="item.subjectName"
                                            ></el-option>
                                        </el-select>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-checkbox
                                            v-model="checkShowParams.tckFuMatchVouSubNo2TwoShow"
                                            :disabled="disabledByTrack"
                                            @change="
                                                () => {
                                                    basicForm.tckFuMatchVouSubNo2Two = '';
                                                }
                                            "
                                            >模糊配置</el-checkbox
                                        >
                                        <el-input
                                            v-model="basicForm.tckFuMatchVouSubNo2Two"
                                            placeholder="请输入"
                                            size="mini"
                                            :disabled="disabledByTrack || !checkShowParams.tckFuMatchVouSubNo2TwoShow"
                                            clearable
                                            class="minusText"
                                        >
                                        </el-input>
                                    </el-col>
                                    <el-col :span="8">
                                        <span>摘要</span>
                                        <el-select
                                            v-model="basicForm.tckVouRemarkContain2TwoList"
                                            placeholder="请选择"
                                            size="mini"
                                            :disabled="disabledByTrack"
                                            multiple
                                            collapse-tags
                                            clearable
                                            class="minusText"
                                            filterable
                                        >
                                            <el-option
                                                v-for="item in causeRelationList"
                                                :key="item.remarkCode"
                                                :value="item.remarkCode"
                                                :label="item.remark"
                                            ></el-option>
                                        </el-select>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-form-item>
                    </div>
                </div>
            </div>
        </el-form>

        <div style="text-align: right; margin-top: 10px">
            <el-button size="mini" type="primary" @click="handleBtnClick('confirm')" v-if="transToResultDetail.operateType != 'look'">确认</el-button>
            <el-button size="mini" type="primary" @click="handleBtnClick('cancel')">取消</el-button>
        </div>
    </div>
</template>
<script lang="ts">
import { DictVO } from '@/common/vo';
import DictionConstUtil, { SGU_CACHE } from '@/utils/diction-const-util';
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({ name: 'OverCalcConfigInfo', components: {} })
export default class OverCalcConfigInfo extends Vue {
    @Prop() transToResultDetail: any;
    basicForm: any = {
        enFacCode: '', // 计算因子编号
        valType: '', // 估值方式 valTypeDescribe
        tradeSettleMode: '', // 结算模式
        causeTag: '', // 归因标识
        comment: '', // 备注 配置说明
        enFacSubCode: '', // 计算因子拆解子项编号
        enFacSubName: '', // 计算因子拆解子项名称
        fuMatchVouchSubNo: '', // 模糊匹凭科目证编，多个使用逗号隔开‘*’表示单个占位符，‘标识
        isTrack: '0', // 是否追溯 0否 1是 isTrackDescribe
        isVouch: '0', // 是否通过凭证分析 0否 1是 isVouchDescribe
        matchVouchSubNoList: [], // 凭证科目(精准匹配)，多个用逗号隔开
        tckFuMatchVouSubNo1Two: '',
        tckFuMatchVouSubNo2Two: '',
        tckFuMatchVouSubNoOne: '', // 模糊匹配凭证编
        tckMatchVouSubNo1TwoList: [], // 凭证编号(精准匹配)
        tckMatchVouSubNo2TwoList: [],
        tckMatchVouSubNoOneList: [],
        tckVouRemarkContain1TwoList: [], // 追溯第二层摘要包含
        tckVouRemarkContain2TwoList: [], // 追溯第二层摘要包含
        tckVouRemarkContainOneList: [], // 追溯第一层摘要包含
        trackDay: undefined, // 追溯天数
        twoTrack: '', // 是否启用第二层追溯
        vouRemarkContainList: [], // 摘要匹配
        vouRemarkEqualList: [],
        vouRemarkNocontainList: [],
        vouRemarkNoequalList: [],
        configId: undefined,
    };

    checkShowParams = {
        fuMatchVouchSubNoShow: false,
        vouRemarkEqualListShow: false,
        vouRemarkNoequalListShow: false,
        vouRemarkContainListShow: false,
        vouRemarkNocontainListShow: false,
        tckFuMatchVouSubNoOneShow: false,
        tckFuMatchVouSubNo1TwoShow: false,
        tckFuMatchVouSubNo2TwoShow: false,
    };
    private calcFactorList: any = [];
    valTypePojo = {
        '1': '市值法',
        '2': '成本法',
        '3': '摊余成本法',
    };
    tradeSettleMode = {
        '1': '托管行结算',
        '2': '证券公司结算',
    };
    isVouchPojo = {
        '0': '否',
        '1': '是',
    };

    causeTagList: DictVO[] = [];
    subjectList: any[] = [];
    causeRelationList: any[] = [];
    enFacSubPojoList: any[] = [];
    get paramDisabled() {
        return this.transToResultDetail.operateType == 'look';
    }

    get disabledByVouch() {
        return this.paramDisabled || this.basicForm.isVouch == '0';
    }

    get disabledByTrack() {
        return this.paramDisabled || this.basicForm.isVouch == '0' || this.basicForm.isTrack == '0';
    }

    get checkedCauseTagList() {
        return this.causeTagList.map((item: any) => {
            if (['301', '302', '303'].includes(item.dictKey) && this.basicForm.isVouch == '0') {
                item.disabled = true;
            } else {
                item.disabled = false;
            }
            return item;
        });
    }

    async mounted() {
        if (this.transToResultDetail.operateType != 'add') {
            for (let key of Object.keys(this.basicForm)) {
                this.basicForm[key] = this.transToResultDetail[key];
            }
        } else {
            this.basicForm.operateType = 'add';
        }
        for (let i of Object.keys(this.basicForm)) {
            if (this.checkShowParams.hasOwnProperty(i + 'Show')) {
                this.checkShowParams[i + 'Show'] = !!this.basicForm[i];
            }
        }
        // 获取字典
        this.calcFactorList = await DictionConstUtil.FNCalculateFactor();

        let list2 = await SGU_CACHE('CauseTag', '/dict/list/code/Y_000336', []);
        this.causeTagList = this.causeTagList.concat(list2);
        console.log(this.causeTagList, 'causeTagList');
        this.$axios
            .post('/ovattr/conf/querySubject')
            .then((res: any) => {
                this.subjectList = res;
            })
            .catch(() => {
                this.subjectList = [
                    {
                        subjectCode: '1',
                        subjectName: '凭1',
                    },
                    {
                        subjectCode: '2',
                        subjectName: '凭2',
                    },
                ];
            });

        this.$axios
            .post('/ovattr/conf/queryCauseRelation')
            .then((res: any) => {
                this.causeRelationList = res;
            })
            .catch(() => {
                this.causeRelationList = [
                    {
                        causeType: '1',
                        fuMatchVouchSubNo: '1',
                        remark: '摘要1',
                        remarkCode: '1',
                    },
                    {
                        causeType: '1',
                        fuMatchVouchSubNo: '1',
                        remark: '摘要2',
                        remarkCode: '2',
                    },
                    {
                        causeType: '1',
                        fuMatchVouchSubNo: '1',
                        remark: '摘要3',
                        remarkCode: '3',
                    },
                    {
                        causeType: '1',
                        fuMatchVouchSubNo: '1',
                        remark: '摘要4',
                        remarkCode: '4',
                    },
                ];
            });
        this.transToResultDetail.operateType != 'add' && this.getEnFacSubPojoList();
    }

    getEnFacSubPojoList() {
        this.$axios
            .post('/fac/sub/query/' + this.basicForm.enFacCode)
            .then((res: any) => {
                this.enFacSubPojoList = res;
            })
            .catch(() => {
                this.enFacSubPojoList = [
                    {
                        enFacCode: 'YH001',
                        enFacSubCode: 'YH001_01',
                        enFacSubName: '证券持仓市值01',
                    },
                ];
            });
    }

    /**
     * 按钮点击
     */
    handleBtnClick(type: string) {
        if (type == 'cancel') {
            this.$emit('removeTab');
        } else if (type == 'confirm') {
            if (!this.basicForm.enFacCode) {
                this.yh_message_info('计算因子编号不可为空');
                return;
            } else if (!this.basicForm.causeTag) {
                this.yh_message_info('归因标识不可为空');
                return;
            }
            let requestUrl = '';
            let responseName = '';
            if (this.transToResultDetail.operateType == 'add') {
                requestUrl = '/ovattr/conf/insert';
                responseName = '配置新增';
            } else if (this.transToResultDetail.operateType == 'edit') {
                requestUrl = '/ovattr/conf/update';
                responseName = '配置编辑';
            }
            this.$axios.post(requestUrl, this.basicForm).then((res: any) => {
                this.yh_message_success(responseName + '成功');
                this.$emit('removeTab', this.transToResultDetail.operateType, this.$attrs.editableTabsValue);
            });
        }
    }
    /**
     * 是否通过凭证分析、是否追溯明细字段引起的重置
     */
    changeParams(param: string) {
        if (param == 'isVouch') {
            this.basicForm = {
                ...this.basicForm,
                causeTag: '',
                isTrack: '0', // 是否追溯 0否 1是 isTrackDescribe
                matchVouchSubNoList: [],
                fuMatchVouchSubNo: '',
                tckFuMatchVouSubNo1Two: '',
                tckFuMatchVouSubNo2Two: '',
                tckFuMatchVouSubNoOne: '', // 模糊匹配凭证编
                tckMatchVouSubNo1TwoList: [], // 凭证编号(精准匹配)
                tckMatchVouSubNo2TwoList: [],
                tckMatchVouSubNoOneList: [],
                tckVouRemarkContain1TwoList: [], // 追溯第二层摘要包含
                tckVouRemarkContain2TwoList: [], // 追溯第二层摘要包含
                tckVouRemarkContainOneList: [], // 追溯第一层摘要包含
                trackDay: undefined, // 追溯天数
                twoTrack: '', // 是否启用第二层追溯
                vouRemarkContainList: [], // 摘要匹配
                vouRemarkEqualList: [],
                vouRemarkNocontainList: [],
                vouRemarkNoequalList: [],
            };
            this.checkShowParams = {
                fuMatchVouchSubNoShow: false,
                vouRemarkEqualListShow: false,
                vouRemarkNoequalListShow: false,
                vouRemarkContainListShow: false,
                vouRemarkNocontainListShow: false,
                tckFuMatchVouSubNoOneShow: false,
                tckFuMatchVouSubNo1TwoShow: false,
                tckFuMatchVouSubNo2TwoShow: false,
            };
        } else if (param == 'isTrack') {
            this.basicForm = {
                ...this.basicForm,
                trackDay: undefined, // 追溯天数
                tckFuMatchVouSubNo1Two: '',
                tckFuMatchVouSubNo2Two: '',
                tckFuMatchVouSubNoOne: '', // 模糊匹配凭证编
                tckMatchVouSubNo1TwoList: [], // 凭证编号(精准匹配)
                tckMatchVouSubNo2TwoList: [],
                tckMatchVouSubNoOneList: [],
                tckVouRemarkContain1TwoList: [], // 追溯第二层摘要包含
                tckVouRemarkContain2TwoList: [], // 追溯第二层摘要包含
                tckVouRemarkContainOneList: [], // 追溯第一层摘要包含
            };
            this.checkShowParams = {
                ...this.checkShowParams,

                tckFuMatchVouSubNoOneShow: false,
                tckFuMatchVouSubNo1TwoShow: false,
                tckFuMatchVouSubNo2TwoShow: false,
            };
        }
    }
}
</script>
<style lang="scss" scoped>
.info {
    padding: 10px;

    h3 {
        width: 100px;
        height: 27px;
        position: relative;
        top: 7px;
        left: 8px;
        text-align: center;
        background-color: #fff;
        font-weight: normal;
        color: #575757;
        z-index: 1;
        &:first-child {
            width: 70px;
        }
    }
}

.flex-box {
    display: flex;
    flex-wrap: wrap;

    .width-4 {
        width: 4%;
    }

    .width-5 {
        width: 5%;
    }

    .width-8 {
        width: 8%;
    }

    .width-10 {
        width: 10%;
    }

    .width-12 {
        width: 12%;
    }

    .width-13 {
        width: 13%;
    }

    .width-14 {
        width: 14%;
    }

    .width-15 {
        width: 15%;
    }

    .width-20 {
        width: 20%;
    }

    .width-22 {
        width: 22%;
    }

    .width-23 {
        width: 23%;
    }

    .width-24 {
        width: 24%;
    }

    .width-25 {
        width: 25%;
    }

    .width-33 {
        width: 33%;
    }

    .width-50 {
        width: 50%;
    }

    .width-70 {
        width: 70%;
    }
    .width-100 {
        width: 100%;
    }

    /deep/ .el-form-item {
        margin: 0;

        .el-form-item__label {
            color: #575757;
            padding: 0;
            // font-size: 12px;
        }

        .el-form-item__content {
            .el-select--mini {
                width: 100%;
            }

            .el-date-editor.el-input {
                width: 100%;
            }

            .el-input-group {
                vertical-align: inherit;
                display: inline-table;
            }
            .minusText {
                width: calc(100% - 100px);
                margin-left: 10px;
            }
        }
    }

    /*** collapse-tags样式 ***/
    /deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light {
        display: flex;
        align-items: center;
        width: 100%;
        max-width: fit-content;
        padding: 0px 5px 0 0;
        margin: 4px 0px 2px 2px;

        .el-select__tags-text {
            display: inline-block;
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    /deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light:first-of-type {
        width: 63%;
    }

    /deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light:last-of-type {
        width: 100%;
    }

    /*** collapse-tags样式 ***/
}

.row-st {
    width: 100%;
    border: 1px solid #ccc;
    padding: 4px 10px;
    display: flex;
    flex-wrap: wrap;
    .el-row {
        width: 100%;
    }
}
</style>
